<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/redmond/jquery-ui-1.10.3.custom.min.css" rel='stylesheet' type='text/css'>
<link href="css/selfTemplate.css" rel="stylesheet" type="text/css">							<!-- 自建CSS函式庫 -->

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>								<!-- 操做cookie用 -->
<script src="js/widgets.js"></script>									<!-- 自建函式庫 -->

<style type="text/css">

	div#divTabs {
		vertical-align: text-top;
	}

	div#mainDiv {
		width: 60%;
		padding-top:20px;
		padding-buttom:20px; 
		padding-right:20px;
		padding-left:15px; 
		
	}
</style>

<script type="text/javascript">


/** 為了產生zTree的參數 **/
var setting = { check:{ enable:true},data:{simpleData: {enable:true}} };


//刪除分頁
function removeTabs(obj, tName,modId) {
	removeRow(obj,tName);
	
	$("#divTabs > ul > li ").each( function(i){
		$(this).children("a[href='#tab"+modId+"']").remove();
	});
	
	$("#tab"+modId).remove();
	
	//如果分頁已經被刪光，要將標頭一併刪除
	var modCount = $(".modTab").size();
	if( modCount == 0 ) {
		$("#labelDivTabs").remove();
		$("#divTabs").remove();
	}	
}

//主管按下同意或拒絕的鈕
function reply(obj) {
	
	$(".reply").prop("disabled",true);	//將操作的按鈕給disable
	$.ajax({ type:"post",url:"ApproveCRA",dataType:"text",async:false,
		data: {
			toDoListId:$(obj).attr("toDoListId"),
			creatorId:$(obj).attr("creatorId"),
			empId:$.cookie("empId"),
			craId:$(obj).attr("craId"),
			isApprove:$(obj).attr("isApprove")
		}, success : function(reses) {
			$("#backToDoList").show();
		}, error : function(xhr, ajaxOptions, thrownError) { errorAjx(xhr); }
	});
}


function queryAllMod(subsysId){
	$.ajax({type:"post",url:"QueryAllMods",dataType:"json",async:false,
		data:{subsysId:subsysId},
		success : function(reses) {
			if ( reses.length > 0 ) {
				/*	1. 產生選擇清單
				 * 	2. 產生分頁
				*/
				$("#tbodyModsPicker tr").remove();
				
				var tmp="";
				var idx=0;
				
				$.each(reses, function(i, modId){
					idx=($("#tbodyModsPicker td.idx").size()+1);
					tmp = "<tr>"+
					  "<td class='center'><input modId='"+modId+"' class='tableModsPickerChk' onclick=\"chk('tableModsPickerChk');\" type='checkbox'/></td>"+	//選擇的checkbox
					  "<td class='idx chkRow'>"+idx+"</td>"+		//流水號
					  "<td class='engN chkRow'>"+modId+"</td>"+	//模組名稱
					  "</tr>";
					$("#tbodyModsPicker").append(tmp);
					
					//如果原本有選的話，這裡要為它打勾
					if ( $("#tbodyMods > tr > td[modId='"+modId+"']").html()!=undefined ) {
						$("#tbodyModsPicker tr:last input[type='checkbox']").prop("checked", true);
					}
				});
				
				//輔助點選
				$(".chkRow").bind("click",function(){
					$(this).parent("tr").children("td:first").children("input[type='checkbox']").click();
				});
				
				
				//檢查一下，如果所有子項都有勾，那chkAll也要勾
				chk("tableModsPickerChk");
				refreshUI(1,"tbodyModsPicker",false);
				
				var tName = "Mods";
				
				$("#modsPicker").prop("title","選擇模組").css("visibility", "visible").dialog({
					resizable:true,modal:true,show:"fold",hide:"fold",width:"420",async:false,
					buttons : {
						"確定" : function() {
							/* 將checkbox有勾選的項目，加入列表 */
							
							if ( $(".tableModsPickerChk").size()>0 && $("#divTabs").size()==0 ) {
								tmp = "<label class='thStyle' id='labelDivTabs' for='divTabs'>--變更申請相關資訊設定--</label><div id='divTabs'><ul id='ulTabs'></ul></div>";
								$("#divRightTop").append(tmp);	//產生Tab的主架構
							}

							$(".tableModsPickerChk").each(function(i){
								if ($(this).is(":checked")) {
									var modId = $(this).attr("modId");
									
									if( $("#tbody"+tName+" td[modId='"+modId+"']").size()==0 ){
										//加入 已選擇模組的清單  tbodyMods
										idx= $("#tbody"+tName+" > tr").size()+1;
									    tmp = "<tr class='row"+tName+idx+"'>"+
										"<td class='center'><button type='button' class='hideable' onclick=\"removeTabs(this,'"+tName+"','"+modId+"')\">-</button></td>"+
										"<td class='idx'>"+idx+"</td>"+
										"<td class='engN' modId='"+modId+"'>"+ modId+"</td>"+
										"</tr>";
										$("#tbody"+tName).append(tmp);
										
										//產生下方分頁
										tmp = "<li><a href='#tab"+modId+"'>"+modId+"</li>";
										$("#ulTabs").append(tmp);
										
										tmp = "<table id='tableCommonReq"+modId+"'><thead class='tableFirst'><tr><td><button onclick=\"addReq('CommonReq"+modId+"','"+modId+"')\"  class='editable' type='button'>+</button></td><th>#</th><th>變更申請依據需求</th></tr></thead><tbody id='tbodyCommonReq"+modId+"'></tbody></table>";
										tmp = "<div class='modTab' modId='"+modId+"' id='tab"+modId+"'>"+tmp+
										"<hr><table id='tablePerformer"+modId+"'><thead class='tableFirst'><tr><td><button class='editable' type='button' onclick='addPerformer(\"Performer"+modId+"\")' id='btnAddPerformer"+modId+"'>+</button></td><th>#</th><th>類型</th><th>名稱</th></tr></thead><tbody id='tbodyPerformer"+modId+"'></tbody></table>"+
										"</div>";
										$("#divTabs").append(tmp);
										$("#divTabs button").button();
									}
								}
							});
							
							//調整 mainDiv的寬度，幾個模組就加幾個模組的寬度
							if ( (23+$("#ulTabs li").size()*10) >60 ) {
								$("#mainDiv").width( (23+$("#ulTabs li").size()*20)+"%" );	
							} else {
								$("#mainDiv").width( "60%" );
							}
								
							refreshUI(1,"tbody"+tName,false);
							$("#divTabs").tabs();
							
							
							$(this).dialog("close");
						},"關閉" :function() {
							$(this).dialog("close");
						}
					}
				});
				
			} else {
				errorMsgShow("子系統"+subsysId+"下，未查詢到任何可使用的變更申請，請先提出變更申請");	
			}
		},error : function(xhr, ajaxOptions, thrownError) { errorAjx(xhr); }
	});	
}



$(document).ready(function(){
	init("creCra.html");
	
	var t = querySubsys($.cookie("empId"),$.cookie("pageName"),"subsysId");
	
	if( t==1 ) {
		windowFreeze("畫面初始中");
		
		//為了重覆使用此頁面，利用此cookie來辨別目前的動作
		if ( $.cookie("actType") !=undefined ) {
			//表示正在是審查新增模組
			if ( $.cookie("actType") == "review" ) {
				
				$("#btnSubmit").hide();	//送出繳交申請的鈕藏起來
				$("td#actName").html("審核模組的變更申請");
				var craId = $.cookie("craId");
				var cra = JSON.parse( $.cookie("cra") );
				$.removeCookie("actType");			//供頁面辨別目前這個頁面要如何回應
				$.removeCookie("craId");			
				
	 			var tmp = "<label class='thStyle' for='divTabs'>--變更申請相關資訊--</label><div id='divTabs'><ul id='ulTabs'></ul></div>";
				$("#divRightTop").append(tmp);	//產生Tab的主架構

				$.each(cra.craObj, function(i, res){
					//加入 已選擇模組的清單  tbodyMods
					var modId= res.modId;
					var idx= $("#tbodyMods > tr").size()+1;
				    tmp = "<tr class='rowMods"+idx+"'>"+
					"<td class='center'><button type='button' class='hideable editable' onclick=\"removeTabs(this,'Mods','"+modId+"')\">-</button></td>"+
					"<td class='idx'>"+idx+"</td>"+
					"<td class='engN' modId='"+modId+"'>"+ modId+"</td>"+
					"</tr>";
					$("#tbodyMods").append(tmp);
					
					//產生下方分頁
					tmp = "<li><a href='#tab"+modId+"'>"+modId+"</li>";
					$("#ulTabs").append(tmp);
					
					tmp = "<table id='tableCommonReq"+modId+"'><thead class='tableFirst'><tr><td><button onclick=\"addReq('CommonReq"+modId+"','"+modId+"')\"  class='editable' type='button'>+</button></td><th>#</th><th>需求描述</th></tr></thead><tbody id='tbodyCommonReq"+modId+"'></tbody></table>";
					tmp = "<div class='modTab' id='tab"+modId+"'>"+tmp+
					"<hr><table id='tablePerformer"+modId+"'><thead class='tableFirst'><tr><td><button class='editable' type='button' id='btnAddPerformer"+modId+"'>+</button></td><th>#</th><th>類型</th><th>名稱</th></tr></thead><tbody id='tbodyPerformer"+modId+"'></tbody></table>"+
					"</div>";
					$("#divTabs").append(tmp);
					$("#divTabs button").button().attr("disabled",true);
					
					//開始加入需求
					$.each(res.reqs, function(j, com){
						var idx= $("#tbodyCommonReq"+modId+" > tr").size()+1;
						var reqId = com.reqId;
						var reqDesc = com.reqDesc;
								
						tmp = "<tr><td class='center'><button class='editable' type='button'>-</button></td><td class='idx'>"+idx+"</td><td>"+reqDesc+"</td></tr>";
						$("#tbodyCommonReq"+modId).append(tmp)
					});
					refreshUI(1,"tbodyCommonReq"+modId,false);
					
					//開始加入執行人員
					$.each(res.performers, function(j, performer){
						var idx= $("#tbodyPerformer"+modId+" > tr").size()+1;
						tmp = "<tr>"+
							"<td class='center'><button class='editable' type='button'>-</button></td>"+
							"<td class='idx'>"+idx+"</td>"+
							"<td>"+(Boolean(performer.isRole)?"角色":"員工")+"</td>"+
							"<td>"+performer.performerName+"</td>"+
							"</tr>";
						$("#tbodyPerformer"+modId).append(tmp)
					});
					refreshUI(1,"tbodyPerformer"+modId,false);
				})
				
				$("#divTabs").tabs();
				
				$(".editable").prop("disabled",true);	//因為是Review，所以將所有輸鈕都disable
	 			
	 			$("#actName").html("--審查繳交申請--");
	 			
	 			tmp="<button class='reply' type='button' onclick='reply(this)' creatorId='"+cra.creatorId+"' toDoListId='"+$.cookie("toDoListId")+"' isApprove='1' craId='"+craId+"'>同意</button> &nbsp; "+
	 				"<button class='reply' type='button' onclick='reply(this)' creatorId='"+cra.creatorId+"' toDoListId='"+$.cookie("toDoListId")+"' isApprove='0' craId='"+craId+"'>拒絕</button> &nbsp; "+
	 				"<p><textarea class='reply'></textarea><p>"+
	 				"<button id='backToDoList' type='button' onclick=\"window.location='toDoList.html'\">回到待辦事項</button>";
	 			$("#divReview").append(tmp);
	 			$("#backToDoList").hide();
	 			$.removeCookie("craId");
	 			$.removeCookie("toDoListId");
			}
		} else {
			$("input[type='text']").val("").prop("maxlength",20).prop("size", $("input[type='text']").prop("maxlength")*0.8 );
			$(".editable").prop("disabled",false);
		}
		
		$("#btnAddMod").bind("click", function(){
			clearErrorMsg();
			windowFreeze();
			queryAllMod( $("select#subsysId option:selected").val());
			windowUnfreeze();
		});
		
		
		//按下送出變更申請
		$("#btnSubmit").bind("click", function(){
			clearErrorMsg();
			windowFreeze();
			
			/**開始產生json格式後傳*****/
			
			/**會有多個物件，如可模組、檔案清單*****/
			
			var modTabs =[];
			$("div.modTab").each( function(i){
				
				var modId = $(this).attr("modId");
				var reqs = [];
				var performers = [];
				
				//擷取共同需求
				$("#tbodyCommonReq"+modId+" > tr").each( function(j) {
					var reqId = $(this).children("td:last").attr("reqId");	//需求ID
					var reqDesc = $(this).children("td:last").html();	//需求描述
					reqs.push({"reqId":reqId,"reqDesc":reqDesc});					//繳交時不需附上需求描述
				});
				
				//擷取執行角色
				$("#tbodyPerformer"+modId+" > tr").each( function(j) {
					var performer = {
						"isRole":$(this).children("td").children("button").attr("isrole"),
						"performerId":$(this).children("td").children("button").val()
					};
					performers.push( performer );
				});
				
				modTabs.push( {"modId":modId,"reqs":reqs,"performers":performers } );
			});
			
			
			var craRecord={
					"subsysId":$("select#subsysId option:selected").val(),	//子系統
					"creatorId":$.cookie("empId"),
					"craObj":modTabs											//繳交的程式清單
			}
			/*****開始產生json格式後傳**/
			
			craRecord = JSON.stringify(craRecord);
			
			$.ajax({type:"post",url:"CreateCra",dataType:"text",async:false,
				data:{ craRecord:craRecord },
				success : function(reses) {
					windowUnfreeze();
					if (reses != "Done") {
						errorMsgShow(reses);
					} else { alert("完成"); }
				},error : function(xhr, ajaxOptions, thrownError) { errorAjx(xhr); }
			});
			
			windowUnfreeze();
		});
		
		windowUnfreeze();
		$("button").button();
	}
	
	
});
	
</script>

</head>
<body>
	<div id="header"></div>		<!-- 畫面抬頭 -->
	<div id="divReview"></div>	<!-- 主管review用 -->
	
	<div id="mainDiv" style="position:relative">
		<button class="editable" type="button" id="btnSubmit">送出變更申請</button>
		<hr><br>
		
		<div id="divRightTop" style="position:absolute;padding-left:10px;padding-right:10px;right:0;"></div>
		<table id="tableMods">
			<thead class="tableFirst">
				<tr><th colspan="2" class="right">子系統：</th>
				<td class="left"><select class="editable" id="subsysId"><option>-請選擇-</option></select></td></tr>
			
				<tr><td colspan="3">&nbsp;</td></tr>
				<tr><th class="center" colspan="3">申請變更的模組</th></tr>
				<tr>
					<td><button class="hideable editable" type="button" id="btnAddMod">+</button></td>
					<th class="center">#</th>
					<th>模組ID</th>
				</tr>
			</thead>
			<tbody id="tbodyMods"></tbody>
			
			<tfoot><tr><td colspan="3" rowspan="2">&nbsp;</td></tr></tfoot>
		</table>
		<p><p><p>
	</div>
</body>


<!-- 單純確認的對話框 -->
<div class="dialog" id="diaConfirm"></div>

<!-- 選擇要變更的模組 -->
<div class="dialog" id="modsPicker">
	<table id="tableModsPicker">
		<thead class="tableFirst">
			<tr>
				<td colspan="3"></td>
			</tr>
			<tr>
				<th class="center"><input id="tableModsPickerChkALL" onclick="chkALL(this);" type="checkbox" /></th>
				<th class="center">#</th>
				<th>模組ID</th>
			</tr>
		</thead>
		<tbody id="tbodyModsPicker"></tbody>
	</table>
</div>

<!-- 選取需求的對話窗 -->
<div class="dialog" id="reqsPicker">
	<table id="tableReqPicker">
		<thead class="tableFirst">
			<tr>
				<th class="center"><input id="tableReqPickerChkALL" onclick="chkALL(this);" type="checkbox" /></th>
				<th>#</th>
				<th>需求描述</th>
				<th>需求ID</th>
				<th>創建日期</th>
				<th>創建人員</th>
			</tr>
		</thead>
		<tbody id="tbodyReqPicker"></tbody>
	</table>
</div>
<div class="dialog" id="performerPicker"></div>
</html>